<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore, useShoppingCartStore } from '@/stores/index.js'
import GoodsItem from '@/components/GoodsItem.vue'

const router = useRouter()

// 用户购物车仓库
const cartStore = useShoppingCartStore()
// 获取用户购物车数据
onMounted(async () => {
  // 用户未登录 缓存中有数据 不发请求
  if (
    !useUserStore().token ||
    (cartStore.shoppingCartList && cartStore.shoppingCartList.length > 0)
  )
    return
  await cartStore.getShoppingCartData()
})

// 全选控制
const checked = computed({
  get() {
    return cartStore.shoppingCartList.every((item) => item.is_checked)
  },
  set(val) {
    cartStore.handleCheckAll(val)
  }
})
// watch(checked, (val, oldValue) => {
//   console.log('old,', oldValue)
//   cartStore.handleCheckAll(val)
// })

// 处理购物车商品数量改变的回调
const handleCount = (data, choose) => {
  cartStore.handleCount(data, choose)
}

// 是否点击编辑
const isEdit = ref(false)
// 处理点击编辑icon 后 展示删除页面的回调
const handleEdit = () => {
  /* 页面部分
        1.取消全选
          1.1 商品总价随之勾选框重新计算
          1.2 按钮颜色变暗
          1.3 icon高亮
 *
 * */
  // const temp = JSON.parse(JSON.stringify(cartStore.shoppingCartList))
  // console.log('temp', temp)
  if (isEdit.value) {
    // 二次点击编辑 恢复 浏览页视图
    isEdit.value = false
    // 恢复数据
    console.log('恢复数据')
    cartStore.rollBack()
  } else {
    const temp = JSON.parse(JSON.stringify(cartStore.shoppingCartList))
    cartStore.backupData(temp)
    isEdit.value = true
    checked.value = false
  }
}
// 删除购物车的回调
const handleDel = () => {
  cartStore.handleDel()
  isEdit.value = false
}

// 点击结算的回调
const handleBusiness = () => {
  const cartIds = cartStore.shoppingCartList
    .filter((item) => item.is_checked)
    .map((item) => item.id)
    .join(',')
  router.push(`/pay?mode=cart&cartIds=${cartIds}`)
}
</script>

<template>
  <div class="shopping-cart">
    <van-nav-bar title="购物车" />
    <div
      v-if="
        useUserStore().token &&
        cartStore.shoppingCartList &&
        cartStore.shoppingCartList.length > 0
      "
      class="shopping-cart-list"
    >
      <div class="mes">
        <span
          >共<i>{{ cartStore.total }}</i
          >件商品</span
        >
        <div :class="{ icon: true, active: isEdit }" @click="handleEdit">
          <van-icon name="edit" />
          <span>编辑</span>
        </div>
      </div>
      <div class="goods-item">
        <GoodsItem
          mode="cart"
          :item="item"
          v-for="item in cartStore.shoppingCartList"
          :key="item.goods_id"
        >
          <template #tags>
            <van-checkbox v-model="item.is_checked"></van-checkbox>
          </template>
          <template #footer>
            <div class="counter">
              <div class="sub" @click="handleCount(item, 'sub')">-</div>
              <div class="count">{{ item.goods_num }}</div>
              <div class="add" @click="handleCount(item, 'add')">+</div>
            </div>
          </template>
        </GoodsItem>
      </div>
      <div class="footer">
        <van-checkbox v-model="checked">全选</van-checkbox>
        <div class="pay">
          <p style="margin-right: 10px">
            <span>合计:￥</span><i>{{ cartStore.totalPrice }}</i>
          </p>
          <van-button
            v-if="!isEdit"
            round
            size="normal"
            type="danger"
            @click="handleBusiness"
            >结算({{ cartStore.checkTotal }})</van-button
          >
          <van-button v-else round size="normal" @click="handleDel"
            >删除</van-button
          >
        </div>
      </div>
    </div>
    <van-empty v-else description="你的购物车是空的,快去逛逛吧">
      <van-button round class="bottom-button" @click="$router.push('/home')"
        >去逛逛</van-button
      >
    </van-empty>
  </div>
</template>

<style scoped lang="less">
.shopping-cart {
  overflow: hidden;
  .shopping-cart-list {
    position: relative;
    background: #f5f5f5;
    height: 100vh;
    padding: 0 12px;

    .goods-item {
      .van-radio-group {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9999;
        transform: translateX(-105px);
      }
    }

    .mes {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 40px;

      .icon {
        &.active {
          color: red;
        }
      }
      span {
        i {
          margin: 0 5px;
          color: red;
        }
      }
    }
    .counter {
      display: flex;
      justify-content: end;
      transform: translateY(-25px);
      .sub,
      .add {
        width: 30px;
      }
      .sub,
      .add,
      .count {
        height: 30px;
        background: #efefef;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
      }
      .count {
        width: 40px;
        margin: 0 5px;
      }
    }
    .footer {
      padding: 0 20px;
      width: 100%;
      height: 50px;
      background: #fff;
      position: fixed;
      left: 0;
      bottom: 0;
      transform: translateY(-50px);
      display: flex;
      justify-content: space-between;
      //align-items: center;
      vertical-align: center;

      .pay {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transform: translateX(10px);

        .van-button--round {
          width: 100px;
          height: 35px;
        }
        p {
          span {
            font-size: 16px;
          }
          i {
            font-style: normal;
            color: red;
            font-size: 20px;
          }
        }
      }
    }
  }
  /deep/ .bottom-button {
    width: 160px;
    height: 40px;
    background-color: #fa2c20;
    color: #fff;
    border: none;
    font-size: 16px;
  }
}
</style>
